<template>
	<!-- 商家用户中心 -->
	<view class="storeUser-main">
		<!-- 用户信息 -->
		<view class="userInfo">
			<view class="userInfo-images">
				<image :src="imageUrls(storeInfo.image)"  class="images"></image>
			</view>
			<view class="info">
				<view class="info-name">
					<text style="margin-right: 10rpx">
						{{ storeInfo.name || '暂无名称' }}
					</text>
					<uni-tag text="店主" type="warning" size="mini"></uni-tag>
				</view>
				<view class="info-zh">门店地址：{{ storeInfo.address || '暂无地址' }}</view>
			</view>
		</view>

		<!-- 门店 -->
		<view class="clerkManage-options" v-if="storeType == '0' || storeType == '1'">
			<view class="clerkManage-option" style="margin-top: 30rpx">
				<view class="clerkManage-option-header">门店</view>
				<view class="option-item" @click="gotoPath('/pages/storeSide/storeInformation/storeInformation')">
					<view class="option-item-icon">
						<uni-icons type="shop-filled" size="22"></uni-icons>
					</view>
					<view class="option-item-title">门店信息</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>

				<view class="option-item" @click="gotoPath('/pages/storeSide/storeQualification/storeQualification')">
					<view class="option-item-icon">
						<uni-icons type="auth-filled" size="22"></uni-icons>
					</view>
					<view class="option-item-title">门店资质</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>

				<view class="option-item" v-if="storeType == '1'" @click="gotoPath('/pages/storeSide/configurationSetting/configurationSetting')">
					<view class="option-item-icon">
						<uni-icons type="gear-filled" size="22"></uni-icons>
					</view>
					<view class="option-item-title">配送设置</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 设置 -->
		<view class="clerkManage-options">
			<view class="clerkManage-option" style="margin-top: 30rpx">
				<view class="clerkManage-option-header">设置</view>
				<view class="option-item" @click="gotoPath('/pages/storeSide/accountSetting/accountSetting')">
					<view class="option-item-icon">
						<uni-icons type="person-filled" size="22"></uni-icons>
					</view>
					<view class="option-item-title">账户设置</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
				<view class="option-item" @click="gotoPath('/pages/storeSide/pcStoreOption/pcStoreOption')" v-if="storeType == '0' || storeType == '1'">
					<view class="option-item-icon">
						<uni-icons type="staff-filled" size="22"></uni-icons>
					</view>
					<view class="option-item-title">PC商家端设置</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
				<view class="option-item" @click="merchantAccount" v-if="storeType == '0' || storeType == '1'">
					<view class="option-item-icon">
						<uni-icons type="wallet" size="22"></uni-icons>
					</view>
					<view class="option-item-title">商家钱包开户</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他 -->
		<view class="clerkManage-options">
			<view class="clerkManage-option" style="margin-top: 30rpx">
				<view class="clerkManage-option-header">其他</view>
				<view class="option-item" @click="gotoPath('/pages/suggestionFeedback/suggestionFeedback')">
					<view class="option-item-icon">
						<uni-icons type="compose" size="22"></uni-icons>
					</view>
					<view class="option-item-title">建议反馈</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
				<view class="option-item" v-if="storeType == '0' || storeType == '1'">
					<view class="option-item-icon">
						<uni-icons type="headphones" size="22"></uni-icons>
					</view>
					<view class="option-item-title">专属客服</view>
					<view class="option-item-icons">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
				<view class="option-item" @click="gotoPath('/pages/storeSide/aboutApp/aboutApp')">
					<view class="option-item-icon">
						<uni-icons type="help" size="22"></uni-icons>
					</view>
					<view class="option-item-title">关于APP</view>
					<view class="option-item-icons" style="width: 140rpx">
						<text style="margin-right: 8rpx">V1.0.1</text>
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 200rpx"></view>

		<!-- 导航 -->
		<view class="footerTabbar">
			<hwxcStoreTabbar />
		</view>
	</view>
</template>

<script>
import hwxcStoreTabbar from '../../../components/hwxcStoreTabbar/hwxcStoreTabbar.vue';
import {storeAccountOpen} from '../../../api/payment/index.js'
import {imageUrl} from "../../../utils/tools.js"
export default {
	data() {
		return {
			storeInfo: {},
			storeType:""
		};
	},
	components: {
		hwxcStoreTabbar
	},
	onLoad() {
		this.storeInfo = this.$store.state.storeInfo || {};
		this.storeType = this.$store.state.storeType;
	},
	methods: {
		gotoPath(path) {
			uni.navigateTo({
				url: path
			});
		},
		// 图片路径拼接
		imageUrls(fileUrl) {
			return imageUrl(fileUrl)
		},
		// 商家开户
		merchantAccount() {
			// #ifdef APP
			this.merchantAccountApp();
			// #endif

			// #ifdef MP-WEIXIN
			this.merchantAccountWx();
			// #endif
		},

		// app
		merchantAccountApp() {},

		// 微信小程序
		async merchantAccountWx() {
			try{
				const resData = await storeAccountOpen({
					type:'0'
				});
				uni.navigateToMiniProgram({
					appId: 'wxc46c6d2eed27ca0a',
					path: 'pages/merchantAddress/merchantAddress',
					extraData: {
						targetUrl: resData.data.regInviteLink
					},
					envVersion: 'release',
					success(res) {
						console.log(res);
					}
				});
			}catch(e){
				throw Error(e)
				//TODO handle the exception
			}
			
		}
	}
};
</script>

<style>
	page{
		height: 100%;
	}
</style>

<style scoped lang="scss">
.storeUser-main {
	box-sizing: border-box;
	padding: 30rpx;
	background: linear-gradient(to bottom, #2979ff, #fff);
	height: 100%;
	.userInfo {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		color: #fff;
		.userInfo-images {
			width: 140rpx;
			.images {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
		.info {
			flex: 1;
			.info-name {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				font-size: 28rpx;
			}
			.info-zh {
				font-size: 24rpx;
			}
		}
	}

	.clerkManage-options {
		.clerkManage-option {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			padding-bottom: 0px;
			.clerkManage-option-header {
				margin-bottom: 20rpx;
				font-weight: bold;
			}
			.option-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px #f3f3f3 solid;
				font-size: 28rpx;
				.option-item-icon {
					width: 55rpx;
				}
				.option-item-title {
					flex: 1;
				}
				.option-item-icons {
					width: 50rpx;
					text-align: center;
				}
			}
		}
	}
	.footerTabbar {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 999;
	}
}
</style>
